<template>
  <div class="HotRecommend">
    <div class="title">
      <div>
        热门推荐
      </div>

      <div class="more" @click="gopage">更多</div>
    </div>
    <div class="recommend-list">
      <div
        class="recommend-item"
        v-for="(item, index) in list"
        :key="index"
        :title="item.g_name"
        @click="goPage(item)"
      >
        <img :src="item.g_picture" :alt="item.title" />
        <div class="desc">
          <p class="desc-title text_row_1">{{ item.g_name }}</p>
          <p class="money">已筹 ￥{{ item.g_start_money }}</p>
        </div>
        <div class="left">
          爆买
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getHotRecommend } from "server/front_k.js";

export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    this._getHotRecommend();
  },
  methods: {
    _getHotRecommend() {
      getHotRecommend().then((res) => {
        this.list = res.data;
      });
    },
    goPage(item) {
      this.$router.push({
        path: "/front/detail",
        query: {
          gid: item.gid,
        },
      });
    },
    gopage() {
      this.$router.push({
        path: "/front/Allproject",
      });
    },
  },
};
</script>

<style scoped>
.recommend-list {
  display: flex;
  justify-content: space-between;
}
.title {
  margin: 30px 0;
  padding: 0 20px;
  border-left: 5px solid #3ae0ab;
  font-size: 24px;
  color: #000;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
}
.more {
  cursor: pointer;
  color: #ccc;
  font-weight: 500;
  font-size: 16px;
}
.more:hover {
  text-decoration: underline;
}
.recommend-item {
  width: calc(25% - 20px);
  height: 280px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.recommend-item img {
  height: 100%;
  width: 100%;
  transition: 0.5s;
}
.recommend-item img:hover {
  height: 110%;
  width: 110%;
}

.desc {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  color: #fff;
  /* box-shadow:inset  0px -30px 30px  rgba(0,0,0,.3); */
  background: url("~assets/img/bgs-sce9f2d038c.png") no-repeat;
  background-position: 0 31.5%;
  height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.desc-title {
  font-size: 20px;
  /* margin-top: 50px; */
  /* margin-bottom: 20px; */
  padding: 20px;
}
.money {
  color: #a5a5a5;
}
.left {
  position: absolute;
  z-index: 3;
  width: 90px;
  height: 30px;
  line-height: 30px;
  color: rgb(255, 255, 255);
  top: 8px;
  left: -23px;
  text-align: center;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  background-color: #32dfb8;
}
</style>
